<template>
  <div class="app-container">
    <xm-table ref="xmtable" :url='url'>
      <template v-slot:search>
        <el-select v-model="where.status" placeholder="请选择" style="margin-bottom:10px; vertical-align: middle;">
          <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>

        <el-button class="filter-item" type="primary" icon="el-icon-search" @click.native="table.where(where)" >搜索</el-button>
      </template>

      <!--表格主内容-->
      <template v-slot:table="slotProps">
        <el-table
            :key="slotProps.tableKey"
            v-loading="slotProps.listLoading"
            :data="slotProps.list"
            border
            highlight-current-row
            style="width: 100%;"
        >
          <el-table-column label="二维码" width="150">
            <template slot-scope="scope">
              <el-image
                      :src="'http://qr.topscan.com/api.php?text=https%3a%2f%2fshuadan.0752gs.cn%2fhb%2fhb.html%3fcode%3d' + scope.row.code"
                      fit="cover"
                      :preview-src-list="['http://qr.topscan.com/api.php?text=https%3a%2f%2fshuadan.0752gs.cn%2fhb%2fhb.html%3fcode%3d' + scope.row.code]"
                      lazy
              >
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
          </el-table-column>

          <el-table-column label="领取Url">
            <template slot-scope="scope">
              <input type="text" :value="`https://shuadan.0752gs.cn/hb/hb.html?code=`+scope.row.code" disabled autofocus style="width: 100%;">
              <span></span>
            </template>
          </el-table-column>

          <el-table-column label="金额" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.money }}</span>
            </template>
          </el-table-column>

          <el-table-column label="微信昵称" width="150">
            <template slot-scope="scope" v-if="scope.row.member">
              {{ scope.row.member ? scope.row.member.nickname : '-'}}
            </template>
          </el-table-column>

          <el-table-column label="领取用户头像" width="200">
            <template slot-scope="scope" v-if="scope.row.member">
              <el-image
                      v-if="scope.row.member"
                      :src="scope.row.member.avatar_url"
                      fit="cover"
                      :preview-src-list="[scope.row.member.avatar_url]"
                      lazy
              >
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
          </el-table-column>

          <el-table-column label="领取时间" width="200">
            <template slot-scope="scope">
              <span>{{ new Date(scope.row.receive_time*1000).format('yyyy/MM/dd') }}</span>
            </template>
          </el-table-column>

          <el-table-column label="状态" width="200">
            <template slot-scope="scope">
              <el-tag type="primary">
                <span>{{ +scope.row.member != '' ? '已领取' : '未领取' }}</span>
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </xm-table>
  </div>
</template>

<script>
import xmTable from "@/components/xmTable"
//import { constants } from 'fs';

export default {
  name: 'projectList',
  components: {
    xmTable,
  },
  data() {
    return {
      url: api.projectItem,     //请求地址
      table: {},            //获取table内部方法
      where: {              //搜索用关键字
        status: '',
        id: ''
      },
      options: [
        { value: '0', label: '全部' },
        { value: '1', label: '未领取' },
        { value: '2', label: '已领取' }
      ],
      nowId: 0              //当前id
    }
  },
  created() {
    const vm = this
  },
  mounted() {
    const vm = this;
    vm.table = vm.$refs.xmtable
    vm.url = vm.url +'/'+ vm.$route.query.id
  },
  computed: {

  },
  methods: {
    // 获取数据接口
    async getProjectData(id) {
      const vm = this
      id = id || '0'
      id = 38
      let url = api.projectItem + '/' + id

      vm.$axios.get(url)
        .then((res) => {
          // vm.sizeForm.nickname = res.nickname
          // vm.sizeForm.avatar_url = res.avatar_url
          // vm.sizeForm.money = res.money
          // vm.sizeForm.receive_time = res.receive_time
        })
    }
  }
}
</script>

<style scoped>
</style>
